<template>
    <div class="xxlNumBoxRoot noselect" :style="{ width: w + 'px', height: h + 'px' }">
        <div class="xxlCtx">
            <div @click="xxlSub" class="xxlSub">-</div>
            <div class="xxlInput"><input v-model="input_data" type="number"></div>
            <div @click="xxlAdd" class="xxlAdd">+</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'XxlNumBox',

    data() {
        return {
            input_data: 1
        };
    },
    props: {
        min: { default: 1 },
        max: { default: null },
        d: { default: 1 },
        val:{
            type:Number,
            default:1
        },
        k: {},
        w: { default: 100 },
        h: { default: 25 }
    },
    mounted() {
        this.input_data = this.val
    },
    watch:{
        'input_data'(n,o){
            let nD = Number(n)
            let oD = Number(o)
            if(!isNaN(oD) && oD!= Infinity && !isNaN(nD) && nD!= Infinity && n!=o){
                this.$emit('change', this.input_data,this.k,o);
            }
            if(isNaN(nD) || nD == Infinity){
                 this.$nextTick(()=>{
                    this.input_data = oD
                });
            }
            
        },
        'val'(n,o){
            this.input_data = n
        }
    },
    methods: {
        xxlAdd() {
            let d = this.input_data + 1
            if(this.max && d <= this.max){
                this.input_data = d
            }
            else{
                this.input_data = d
            }
        },
        xxlSub() {
            let d = this.input_data - 1
            if (d >= this.min) {
                this.input_data = d
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import '../xxl-scss/xxl.scss';
.xxlCtx {
    width: 100%;
    height: 100%;
    display: flex;
    .xxlSub,.xxlAdd{
        display: flex;
        width: 30%;
        height: 100%;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid $xxl-border-color;
    }
    .xxlSub{
        border-radius: 5px 0 0 5px;
    }
    .xxlInput{
        border-top: 1px solid $xxl-border-color;
        border-bottom: 1px solid $xxl-border-color;
        text-align: center;
        width: 40%;
    }
    .xxlAdd{
        border-radius: 0 5px 5px 0;
    }
}
</style>